<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百商汇</title>
	<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0,minimum-scale = 1.0,user-scalable = no,width = device-width">
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="../csses/forgetPwd.css">
</head>
<body>
	<div class="forgetPwd_title">
		找回密码
		<img src="../image/back.png" onclick="goBack()">
	</div>
	<div class="forgetPwd_box">
		<ul>
			<li>
				<span>手机号码</span>
				<input type="text" placeholder="请输入11位手机号" class="mobile input"></input>
			</li>
			<li style="position: relative;" id="testPic">
				<span>图片验证</span>
				<input type="text" placeholder="请输入图片验证码" class="testPic input"></input>
				<img id="pic">
			</li>
			<li>
				<span>短信验证</span>
				<input type="text" placeholder="请输入验证码" class="smsVerifyCode input"></input>
				<input id="second" type="button" value="获取验证码" onclick="sendMessage()"></input>
			</li>
			<li>
				<span>密码类型</span>
				<div class="loginPwd" id="1">
					<span class="outside">
						<span class="inside" style="display: block;"></span>
					</span>
					<a>登录密码</a>
				</div>
				<div class="payPwd" id="2">
					<span class="outside">
						<span class="inside"></span>
					</span>
					<a>支付密码</a>
				</div>
			</li>
			<li>
				<span>新 密 码</span>
				<input type="password" placeholder="请输入不少于6位的密码" class="password input"></input>
				<img src="../image/psw.png">
			</li>
			<li>
				<span>确认密码</span>
				<input type="password" placeholder="请确认密码" class="commitPwd input"></input>
				<img src="../image/psw.png">
			</li>
		</ul>

		<button type="button" class="submitBtn">确定</button>
		<div class="remindBox"></div>
	</div>

	<script type="text/javascript" src="../lib/flexible.js"></script>
	<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="../lib/des3.js"></script>
	<script type="text/javascript">
		var IntervalObj,count = 60,curCount,type;
		
		onload = function () {
			var tab = new Tab('inside','outside');
			tab.init();
		};

		$('.input').focus(function(){
			this.select();
		});

		function Tab (classname1,classname2) {
			this.aIn = document.getElementsByClassName(classname1);
			this.aOut = document.getElementsByClassName(classname2);
		}

		Tab.prototype.init = function () {
			that = this;
			for(var i = 0; i < this.aOut.length; i++){
				this.aOut[i].index = i;
				this.aOut[i].onclick = function () {
					that.change(this);
					var m = event.target.parentNode;
					type = m.getAttribute('id');
				}
			}
		};

		Tab.prototype.change = function (obj) {
			for(var i = 0; i < this.aOut.length; i++){
				this.aIn[i].style.display = 'none';
			}
			this.aIn[obj.index].style.display = 'block';
		};

		function goBack(){
			window.history.back();
		}

		var $remindBox = $('.remindBox');

		function remind(a){
			$remindBox.css('display','block').text(a);
			setTimeout(function(){
				$remindBox.css('display','none');
			},1500);
		}

		function getPic () {
	        $.ajax({
	            type : 'post',
	            url : '/api/v1/sms/getUuid',
	            data : {
	                paramStr : "{'type':'" + 'register' + "','remark':'" + "" + "'}"
	            },
	            dataType : 'json',
	            timeout : 10000,
	            success : function (data) {
	            	if(data.code == 200){
	            		var obj = JSON.parse(data.data);
		                var picUrl = obj.verifyInfo.picUrl;
		                var uuid = obj.verifyInfo.uuid;
		                sessionStorage.uuid = uuid;
		                sessionStorage.picUrl = picUrl;
		                $('#pic').attr('src',sessionStorage.picUrl);
	            	}
	            },
	            error : function (xhr,type,errorThrown) {
	                
	            }
	        });
	    }
	    getPic();
		
		function sendMessage(){
			var $mobile = $('.mobile').val();
			var verifyCode = document.querySelector('.testPic').value;
	        verifyCode = verifyCode == null ? null : verifyCode;
			if(!(/^1[3|4|5|7|8]\d{9}$/.test($mobile))){
				remind('请输入正确的手机号');
			}else{
				$.ajax({
					type : 'post',
					url : '/api/v1/sms/send',
					data : {
						paramStr: DES3.encrypt("{'mobile':'"+ $mobile + "','type':'" + "forgetPassword" + "','uuid':'" + sessionStorage.uuid + "','verifyCode':'" + verifyCode +"'}")
					},
					dataType : 'json',
					timeout : 10000,
					success : function (data) {
						if(data.code == 200){
							curCount = count;
							IntervalObj = window.setInterval(SetRemindTime,1000);
						}else if(data.code == 108){
							$('#testPic').css('display','block');
							getPic();
							$('#pic').click(function(){
				                getPic();
				            });
						}
						remind(data.message);
					},
					error : function (xhr,type,errorThrown){
						// alert('未知错误');
					}
				})
			}
		}

		function SetRemindTime(){
			if(curCount == 1){
				window.clearInterval(IntervalObj);
				$('#second').removeAttr('disabled');
				$('#second').val('获取验证码');
				$('#second').css('backgroundColor','#dc4b19');
			}else{
				curCount--;
				$('#second').val('剩余' + curCount + '秒');
				$('#second').css('backgroundColor','#ccc');
				$('#second').attr('disabled','true');
			}
		}

		$('.submitBtn').click(function(){
			var $password = $('.password').val();
			var $commitPwd = $('.commitPwd').val();
			var $verification = $('.smsVerifyCode').val();
			if(!$password){
				remind('密码不能为空');
			}else if($password.length < 6){
				remind('密码长度不能小于6位');
			}else if($commitPwd != $password){
				remind('两次输入的密码不同');
			}else if(!$commitPwd){
				remind('请确认密码');
			}else{
				$.ajax({
					type : 'post',
					url : '/api/v1/user/password/reset',
					data : {
						paramStr: "{'mobile':'" + $mobile + "','password':'" + $password + "','smsVerifyCode':'" + $verification + "','type':'" + type + "'}"
					},
					dataType : 'json',
					timeout : 10000,
					success : function (data) {
						remind(data.message);
						if(data.code == 200){
							$('.submitBtn').attr('disabled',true).css('background','#ccc');
							setTimeout(function(){
								window.location.href = 'login.html';
							},1500);
						}
					},
					error : function (xhr,type,errorThrown) {
						// alert('未知错误');
					}
				});
			}	
		});
	</script>
</body>
</html>